import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class TextFieldPage extends StatefulWidget {
  @override
  _TextFieldPageState createState() => new _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("TextField"),
      ),
      body: _buildListView(),
    );
  }

  Widget _buildListView() {
    return ListView.builder(
      itemBuilder: (context, index) {
        return _buildListViewItem(index);
      },
      itemCount: textFields.length,
    );
  }

  Widget _buildListViewItem(index) {
    return Container(
      padding: EdgeInsets.all(10.0),
      alignment: Alignment.center,
      child: textFields[index],
    );
  }
}

List<Widget> textFields = <Widget>[
  Column(
    children: <Widget>[
      Text("TextField"),
      Container(
        child: TextField(),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(
            icon: Icon(Icons.person),
          ),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(suffixIcon: Icon(Icons.person)),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(labelText: '姓名：', labelStyle: TextStyle(color: Colors.red)),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(
              helperText: '用户名长度为6-10个字母', helperStyle: TextStyle(color: Colors.blue), helperMaxLines: 1),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(hintText: '请输入用户名', hintStyle: TextStyle(color: Colors.grey), hintMaxLines: 1),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(
            errorText: '用户名输入错误',
            errorStyle: TextStyle(fontSize: 12),
            errorMaxLines: 1,
            errorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
          ),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          onChanged: (value) {},
          decoration: InputDecoration(counterText: '0/32'),
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(hintText: 'password'),
          obscureText: true,
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(hintText: '格式匹配'),
          inputFormatters: [
            WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")),
          ],
        ),
      ),
    ],
  ),
  Column(
    children: <Widget>[
      Text("TextField Icon"),
      Container(
        child: TextField(
          decoration: InputDecoration(
            fillColor: Color(0x30cccccc),
            filled: true,
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0x00FF0000)),
                borderRadius: BorderRadius.all(Radius.circular(100))),
            hintText: 'QQ号/手机号/邮箱',
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Color(0x00000000)),
                borderRadius: BorderRadius.all(Radius.circular(100))),
          ),
        ),
      ),
    ],
  ),
];
